<template>
  <div class="userInfo-box">
    <div class="img-box">
      <span>个人头像</span>
      <div>
        <img :src="imgPath" alt="" />
        <input type="file" id="image" @change="uploadimage($event)" title="请选择头像" />
        <div class="iconT">
          <el-icon>
            <RefreshRight style="width: 30px; height: 30px" />
          </el-icon>
        </div>
      </div>
    </div>
    <el-form :model="data.form" label-width="120px" label-position="left" ref="ruleFormRef" :rules="data.rules">
      <el-form-item prop="name" label="用户名">
        <el-input v-model="data.form.name" placeholder="请输入用户名称" />
      </el-form-item>
      <el-form-item prop="pwd" label="用户密码">
        <el-input v-model="data.form.pwd" placeholder="请输入密码" disabled />
      </el-form-item>
      <el-form-item prop="role" label="角色">
        <el-input v-model="data.form.role" disabled />
      </el-form-item>
      <el-form-item prop="email" label="电子邮箱">
        <el-input v-model="data.form.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item prop="tel" label="手机号">
        <el-input v-model="data.form.tel" placeholder="请输入手机号码" />
      </el-form-item>
      <p><el-button type="primary" @click="save()">保存修改</el-button></p>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, computed, ref, reactive } from 'vue'
import { useStore } from '@/pinia/index'
import { useRouter } from 'vue-router'
import { getUserInfoApi, updateUserInfoApi } from '@/api/mgmtUser' //api/后面不能大写Mgmt
import { ElMessage } from 'element-plus'
import { RefreshRight } from '@element-plus/icons-vue'
import pic from '@/assets/img/zk.jpg'
const pinia = useStore()
const router = useRouter()
const data = reactive({
  form: {
    name: 'x',
    pwd: 'x',
    role: '',
    email: '',
    tel: '',
    icon: ''
  },
  rules: {
    name: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      {
        required: true,
        pattern: /^[a-zA-Z\u4e00-\u9fa5]{2,16}$/,
        message: '4到16位(字母，数字，下划线，减号)',
        trigger: 'blur'
      }
    ],
    pwd: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      {
        required: true,
        pattern: /^[a-zA-Z0-9]{4,16}$/,
        message: '4到16位(字母，数字)',
        trigger: 'blur'
      }
    ],
    role: [{ required: true, message: '请选择角色', trigger: 'change' }],
    email: [
      { required: true, message: '请输入正确邮箱', trigger: 'blur' },
      {
        required: true,
        pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
        message: '请输入正确邮箱',
        trigger: 'blur'
      }
    ],
    tel: [
      { required: true, message: '手机号必填', trigger: 'blur' },
      {
        required: true,
        pattern: /^1[345789]\d{9}$/,
        message: '请输入正确手机号',
        trigger: 'blur'
      }
    ]
  },
  file: ''
})
const ruleFormRef = ref<any>(null)
let imgPath = ref<any>('')
let defatltIcon = ref<any>(pic)

const uploadimage = (e) => {
  let file = e.target.files[0]
  let imgSize = file.size / 1024 //kb 333.8388671875
  if (imgSize < 3000) {
    let url = URL.createObjectURL(file)
    imgPath.value = url //预览图片
    data.file = file
  } else {
    ElMessage({ message: '头像不要大于3M', type: 'error' })
  }
}
const getUserInfo = async () => {
  let param = { id: pinia.userInfo.id }
  const res = await getUserInfoApi(param)
  if (res.code === 200) {
    data.form = res.data
    data.form.role = pinia.userRoles.join('、')
    if (data.form.icon == null || data.form.icon == '') {
      imgPath.value = defatltIcon.value
    } else {
      imgPath.value = process.env.BASE_API + '/' + data.form.icon
    }
    //更新头部信息
    pinia.$patch({ userInfo: res.data })
  }
}
const save = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      let params = new FormData()
      params.append('data', JSON.stringify(data.form))
      params.append('file', data.file)
      const res = await updateUserInfoApi(params)
      if (res.data) {
        ElMessage({ message: '保存成功', type: 'success' })
        getUserInfo()
      }
    }
  })
}
onMounted(() => {
  getUserInfo()
})
</script>
<style scoped lang="scss">
.userInfo-box {
  width: 500px;
  margin: 20px;

  .img-box {
    display: flex;
    position: relative;

    span {
      width: 120px;
      width: 120px;
      font-size: 14px;
      color: var(--el-text-color-regular);
    }

    img {
      width: 120px;
      height: 120px;
      overflow: hidden;
    }

    input {
      position: absolute;
      left: 120px;
      width: 120px;
      height: 120px;
      overflow: hidden;
      opacity: 0;
      z-index: 3;
      cursor: pointer;

      &:hover + .iconT {
        display: block;
      }
    }

    .iconT {
      width: 120px;
      height: 120px;
      position: absolute;
      z-index: 2;
      border: 1px solid #388ce9;
      text-align: center;
      line-height: 120px;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      top: 0;

      i {
        font-size: 30px;
        color: #fff;
      }
    }
  }
}
</style>
